<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*
        1. flex
          display: flex;
          justify-content: center;
          align-items: center;
        
        2. position
          元素未知宽高：
            （父相子绝）
            父元素开启相对定位 relative
            子元素开启绝对定位 absolute
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);

          元素已知宽高
            （父相子绝）
            父元素开启相对定位 relative
            子元素开启绝对定位 absolute
              top: 50%;
              left: 50%;
              margin-left: -100px; (负自身宽度的50%)
              margin-top: -100px; (负自身高度的50%)

          元素未知宽高：
            （父相子绝）
            父元素开启相对定位 relative
            子元素开启绝对定位 absolute
              top: 0;
              left: 0;
              bottom: 0;
              right: 0;
              margin: auto;

        3. 文字居中
          text-align: center;
          line-height: 元素高度;
    */
    </script>
  </body>
</html>
